<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右联盟</title>
    <link rel="stylesheet" href="./css/all.css"/>
    <link rel="stylesheet" href="./css/union.css"/>
    <script>
        if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                var phoneScale = parseInt(window.screen.width)/750;
                document.write('<meta name="viewport" content="width=750,initial-scale='+ phoneScale +', minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +',user-scalable=no, target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=750,initial-scale='+ phoneScale +',user-scalable=no, target-densitydpi=device-dpi">');
            }
        }else{
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
    </script>
</head>
<body>
<!--饼图-->
<div class="scale-map">
    <div class="map"  id="map">
    </div>
    <div class="map-word">
        <P class="map-price">1230.00元</P>
        <P>推广收益</P>
    </div>
</div>
<!--饼图-->
<div class="friends">我的推广好友 (<span>3</span>)</div>
<!--好友信息-->
<div class="outs">
    <div class="hasEarn">
        <!--单个好友信息-->
        <div class="one-message">
            <div class="people-left">
                <img src="./img/union/img1.png" alt=""/>
            </div>
            <div class="word-middle">
                <p class="name">李女士</p>
                <p class="allMoney">累计为您带来¥200.00佣金收入</p>
            </div>
            <div class="word-right">
                <p class="contact"><img src="./img/union/add.png" alt=""/> 已关联</p>
                <p class="time">2015-08-25 关联成功</p>
            </div>
        </div>
        <!--单个好友信息-->

        <!--单个好友信息-->
        <div class="one-message">
            <div class="people-left">
                <img src="./img/union/img2.png" alt=""/>
            </div>
            <div class="word-middle">
                <p class="name">王先生</p>
                <p class="allMoney">累计为您带来¥200.00佣金收入</p>
            </div>
            <div class="word-right">
                <p class="contact"><img src="./img/union/add.png" alt=""/> 已关联</p>
                <p class="time">2015-08-25 关联成功</p>
            </div>
        </div>
        <!--单个好友信息-->

        <!--单个好友信息-->
        <div class="one-message">
            <div class="people-left">
                <img src="./img/union/img2.png" alt=""/>
            </div>
            <div class="word-middle">
                <p class="name">张先生</p>
                <p class="allMoney">累计为您带来¥200.00佣金收入</p>
            </div>
            <div class="word-right">
                <p class="contact"><img src="./img/union/add.png" alt=""/> 已关联</p>
                <p class="time">2015-08-25 关联成功</p>
            </div>
        </div>
        <!--单个好友信息-->
    </div>


    <!--无收益状态-->
    <div class="noEarn">
        <p class="tellYou">报告大人！</p>
        <p class="noFriend">您还没有关联好友哦~~</p>
    </div>
    <!--无收益状态-->
</div>
<!--好友信息-->
<div class="bottom-btn">
    <a href="">邀请好友</a>
</div>

<!--邀请好友弹窗star-->
<div class="share_box" onclick="event.target.style.display = 'none'">
    <div class="head-word">
        <p>请点击右上角将它发送指定的朋友<img src="./img/weix-downLoad/way.png" alt="p"/></p>
        <p class="loadWay">或者分享到朋友圈</p>
    </div>
</div>
<!--邀请好友弹窗end-->

</body>
</html>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'js/echarts-2.2.7/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('map'));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },

                    color:['#87cefa', '#ff7f50'],

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : ['40%', '55%'],
                            selectedMode: 'single',
                            center: ['50%', '60%'],
                            data:[

                                {value:147, name:'借款佣金收入\n'+111+'元'},
                                {value:102, name:'投资佣金收入'}

                            ],
                            itemStyle:{
                                normal:{
                                    label:{
                                        textStyle:{
                                            fontSize:20,
                                            fontWeight:"bold"
                                        }
                                    }
                                }
                            }

                        }
                    ]


                };

                if(option.series[0].data.length==1){
                    option.color=["#ccc"];
                    $(".outs .hasEarn").css({display:"none"});
                    $(".outs .noEarn").css({display:"block"});
                    $("body").css({
                       background:"#fff"

                    });
                    $(".map-price").html("0.00元");
                }

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );
</script>